<template>
	<view class="content">
		<view>
			<view class="page-section page-section-gap">
				<map
				id="myMap"
				style="width: 100%; height: 610px;"
				:latitude="latitude"
				:longitude="longitude"
				:markers="markers"
				show-location
				></map>
			</view>
		</view>
		
		<view class="bottom-title">
			<view style="padding: 45rpx 35rpx; position: relative;">
				<view class="title">伟业汽车维修厂(人民路店)</view>
				<view class="star">
					<image src="../../../static/image/五星 拷贝.png" mode=""></image>
					<image src="../../../static/image/五星 拷贝.png" mode=""></image>
					<image src="../../../static/image/五星 拷贝.png" mode=""></image>
					<image src="../../../static/image/五星 拷贝.png" mode=""></image>
					<image src="../../../static/image/五星 拷贝.png" mode=""></image>
					5分
				</view>
				<view>营业时间: 周一至周五  09:00-22:00</view>
				<view>商鞅去人民中路32号</view>
				<view class="distance">44m</view>
				<view class="pic">
					<image src="../../../static/image/zrn.jpg" />
				</view>
			</view>
			
			<view class="button">
				<button type="primary" @click="toggle('bottom')" class="bottom-button" style="color: black; background-color: #EFEFEF;">联系门店</button>
				<button class="bottom-button" style="background-color: #FF4E4E;">立即预定</button>
			</view>
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<view class="text">18893029302</view>
					<view class="text">呼叫</view>
					<view class="text">取消</view>
				</view>
			</uni-popup>
			
			
		</view>
		
	</view>
		
		
</template>

<script>
	var self ,mapCtx
	export default {
			onLoad() {
						self = this;
						// 获取当前map
						mapCtx =  wx.createMapContext('myMap');
						self.getAuthorizeInfo();
					},
			//相关配置参数
			data() {
			  return {
				  type: 'bottom',
				  // 初始化的中心位置
					latitude: 23.099994,
					longitude: 113.324520,
					// 标记点
					markers: [{
								id: 1,
								latitude: 23.099994,
								longitude: 113.324520,
								name: 'T.I.T 创意园'
						    }],
			  }
			
			},
			methods:{
				toggle(type) {
					this.type = type
					// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
					this.$refs.popup.open(type)
				},
				// 位置授权
				getAuthorizeInfo(){
				              uni.authorize({
				                  scope: 'scope.userLocation',
				                  success() { // 允许授权
				                      self.getLocationInfo();
									  console.log("获取到周边信息");
				                  },
				                  fail(){    // 拒绝授权
				                      self.openConfirm();
				                      console.log("你拒绝了授权，无法获得周边信息")
				                  }
				              })
				          },
				          // 获取地理位置
				getLocationInfo(){  
				              uni.getLocation({
				                  type: 'wgs84',
				                  success (res) {
				                      console.log(res,"当前位置");
									  // 移动到当前位置
									 self.toLocation(res)
									 self.latitude = res.latitude;
									 self.longitude = res.longitude;
				                  }
				              });
				          },
				          // 再次获取授权
				          // 当用户第一次拒绝后再次请求授权
				openConfirm(){
				    uni.showModal({
				        title: '请求授权当前位置',
				        content: '需要获取您的地理位置，请确认授权',
				            success: (res)=> {
				                if (res.confirm) {
				                    uni.openSetting();// 打开地图权限设置
				                } else if (res.cancel) {
				                    uni.showToast({
				                    title: '你拒绝了授权，无法获得周边信息',
				                    icon: 'none',
				                    duration: 1000
				                     })
				                }
				            }
					});
				 },
				 toLocation:function(obj){
					 // 改变地图中心位置
				 	mapCtx.moveToLocation(obj)
					// 移动标记点并添加动画效果
				 	mapCtx.translateMarker({
				 	  markerId: 1,
				 	  autoRotate: true,
				 	  duration: 100,
				 	  destination: {
				 	    latitude:obj.latitude,
				 	    longitude:obj.longitude,
				 	  },
				 	  animationEnd() {
				 	    console.log('animation end')
				 	  }
				 	})
				 }       
			}
		}
</script>

<style>
.page-section-gap{
	  box-sizing: border-box;
	  padding: 0 30rpx;
	}
	
	.page-body-button {
	  margin-bottom: 30rpx;
	}
	.title{
		font-size: 35rpx;
		font-weight: bolder;
	}
	.bottom-title{
		width: 100%;
		position: absolute;
		left: 0;
		top: 560px;
		background-color: white;
	}
	.star image{
		width: 35rpx;
		height: 35rpx;
		margin: 0 5rpx;
	}
	.button{
		display: flex;
		justify-content: space-around;
	}
	.bottom-button{
		width: 320rpx;
		border-radius: 45rpx;
		font-weight: bold;
		color: aliceblue;
	}
	.distance{
		position: absolute;
		right: 100rpx;
		top: 35rpx;
		color: mediumblue;
	}
	.pic{
		position: absolute;
		right: 30rpx;
		top: 90rpx;
	}
	.pic image{
		width: 200rpx;
		height: 100rpx;
	}
	.popup-content {
			/* @include flex; */
			align-items: center;
			justify-content: center;
			padding: 15px;
			height: 130px;
			background-color: #fff;
	}
	.text{
		font-size: 35rpx;
		text-align: center;
		padding: 25rpx;
		border-bottom: 1px solid gainsboro;
	}
	.text:nth-child(3){
		border: 0;
	}
	
</style>
